HTML新手學習part1

程式設計網頁設計程式語言 html 新手上路

浪浪狗 2018-10-09 15:53:02 ‧ 3780 瀏覽

分享至

哈囉大家好！最近在學HTML，所以想來跟大家分享一下，讓同樣初學習HTML的新手們比較好上路，也給自己一個地方可以記錄一下所學?~~如果內文有說錯的也還請大家多多包涵！

HTML?

大家一定都聽過HTML，但卻搞不清楚它到底是什麼，其實HTML的全名就是HyperText MarkUp Language，翻成中文叫做「超文本標記語言」，翻成白話文就是 用這種特殊的語言，來告訴你的電腦瀏覽器：這個網頁應該要長怎麼樣，裡面應該要有什麼東西組成！ 所以你看到的很多網站，很多都是用HTML架成的呢！

怎麼寫？

那要怎麼寫HTML呢？
最簡單的方法就是打開附屬應用程式裡面的「筆記本」，就可以開始輸入內容囉！只要儲存時再把文件的副檔名改成 .html ，然後用你的瀏覽器打開它，你的第一個網頁就出現啦！
但是筆記本的功能太簡略了，如果有輸入錯誤的話只能一行一行去檢查?，所以這邊也推薦大家可以使用 Visual Studio (Code) 這個軟體喔！這是專門用來寫程式、架網站的軟體，它也會主動幫你偵測有沒有錯誤的地方，也有一些貼心小巧思，使用起來也會比筆記本方便很多呢！
(註：如果有打新的內容進去，都要記得按”儲存(ctrl+S)”，接著到網站上”重新整理”，才會跑出更新過後的網站喔！)

要從哪裡開始？

知道用什麼來架網站之後，就要真正開始下手囉！
首先，先給大家一個觀念！HTML這個語言必須要有頭有尾，明確的告訴你的電腦指令的範圍！意思就是假如我想要某一段文字是呈現藍色的，那就要在文字的最前面告訴電腦：「接下來的文字是藍色的。」而在最後面跟電腦說：「藍色的文字就到這裡為止。」這樣才會是一個完整的指令碼喔！

那要怎麼分開頭或是結尾呢？?

HTML的指令碼幾乎都是用<xxx>表示，那結尾標籤只要在前面加上/，變成</xxx>，就可以囉~

那我們就開始囉！

首先，先建立一個網站(HTML檔)

<html>

</html>

接著，一個HTML檔裡面通常會包含兩個元素：一個是描述這個網站的特性或是屬性，也就是描述檔，描述這個網站的屬性等等，我們叫它<head>；而另一個則是呈現一個網站的所有內容，也就是你看到一個網站的所有東西都在這裡，我們統一用<body>來包裝
所以加起來就長這樣！

<html>
   <head>
   
   </head>
   <body>
   
   </body>
</html>

那我們要更進階去描述這個網站的屬性啦！例如說：我想要它可以讀取中文，那我就加<meta charset="utf-8">進去，也就是告知瀏覽器這個網站用的是什麼字符編碼格式。而<title>則是說明這個網站「索引標籤的名稱」是什麼，那因為通常首頁的名字都取作index，所以我就先打這個啦。

<html>
   <head>
      <meta charset="utf-8">
      <title>index<title>
   </head>
   <body>
   
   </body>
</html>

全部加起來會長這樣
而網站打開來會長這樣~~

藍色畫底線的就是剛剛說的索引標籤名稱“index”啦
綠色的網址就會顯示你把檔案存在電腦上的哪個位置哦~~~
而內文因為都還沒有寫任何東西，所以會是空白的！

那設定完網站的屬性了，接下來要開始編輯內文囉！

先簡單跟大家介紹我們常用的標題字，有<h1>到<h6>6種樣式，字體也會越來越小喔~
程式碼寫出來就長這樣~

<html>
   <head>
      <meta charset="utf-8">
      <title>index<title>
   </head>
   <body>
      <h1>This is my first home page</h1>
      <h2>This is my first home page</h2>
      <h3>This is my first home page</h3>
      <h4>This is my first home page</h4>
      <h5>This is my first home page</h5>
      <h6>This is my first home page</h6>
   </body>
</html>

而網站顯示出來長這樣！

那如果想要簡單更改字體的樣式，也可以在文字前後輸入標籤，例如：<b>是粗體；<i>是斜體等等。(註：<p>也就是paragragh，可以用來表示一個段落)
如果你想要換行，也可以在文字後面加上<br>，這邊也讓大家看看有沒有用<br>的差別！(註：因為代表換行，本身是沒有”範圍”的概念，所以自然也就不用打結尾標籤囉~)

<html>
   <head>
      <meta charset="utf-8">
      <title>index<title>
   </head>
   <body>
      <h1>This is my first home page</h1>
      <h2>This is my first home page</h2>
      <h3>This is my first home page</h3>
      <h4>This is my first home page</h4>
      <h5>This is my first home page</h5>
      <h6>This is my first home page</h6>
         
      <p>
      This is normal text
      <b>This text is bold</b> <br>
      <i>這是斜體</i>
      </p>
   </body>
</html>